<template>
	<view class="fans-box">
		<view class="fans-ul inner">
			<template v-if="list.length>0">
			<view class="fans-li" v-for="(item, index) in list" :key="index" @click="clickZhu(item)">
				<image :src="item.avatar" mode="aspectFit" class="fans-li-avater"></image>
				<view class="fans-li-right">
					<view class="fans-li-top">
						<view class="fans-name">
							{{ item.nick_name }}
							<!-- 女 -->
							<image v-if="item.sex =='F'" src="http://static.kuaimayoupin.com/6469534775244423.png"  mode="aspectFit"></image>
							<!-- 男 -->
							<image v-if="item.sex =='M'" src="http://static.kuaimayoupin.com/7579544950996162.png" mode="aspectFit"></image>
						
						</view>
						<text class="fans-time" v-if="typeName == 1 || typeName == 2">{{item.created_time |format}}</text>
						<text class="fans-time" v-if="typeName == 3">
							{{getYMDHMS(item.visit_time)}}
						</text>
					</view>
					<view class="fans-li-tag">
						<text class="tag1" v-if="item.city">{{ item.city }}</text>
						<text class="tag2" v-if="item.age">{{ item.age }}</text>
						<text class="tag3" v-if="item.fate_value">缘分值{{ item.fate_value }}</text>
						<text class="tag4" v-if="item.user_status">{{ item.user_status }}</text>
						<!-- <text v-for="(item, index) in taglist" :key="index" :class="tagName[index]">{{ item }}</text>
						<text v-for="(item, index) in taglist" :key="index" :class="tagName[index]">{{ item }}</text>
						<text v-for="(item, index) in taglist" :key="index" :class="tagName[index]">{{ item }}</text> -->
					</view>
					<view class="fans-li-bot">
						<view class="fans-li-msg" v-if="isFans">
							送您99朵玫瑰
							<image src="" mode=""></image>
						</view>
						<view class="fans-li-msg" v-else>
							{{item.soliloquy}}
						</view>
						<view v-if="typeName == 2">
							<template v-if="!item.both_status">
								<view class="fans-attention" @click="follow(item)">+回关</view>
							</template>
							<template v-else>
								<view>相互关注</view>
							</template>
						</view>
						<view v-if="typeName == 1">
							<view v-if="item.follow_status == 1">相互关注</view>
							<view v-else>已关注</view>
						</view>
						
					</view>
				</view>
			</view>
			</template>
			<template v-else>
				<fansempty/>
			</template>
		</view>
	</view>
</template>

<script>
import { getFansList, getFollowList ,recent,follow} from '@/api/user/user.js';
import fansempty from '@/pageA/empty/empty.vue'
export default {
	data() {
		return {
			taglist: ['北京', '29岁', '缘分值99', '可撩'],
			tagName: ['tag1', 'tag2', 'tag3', 'tag4'],
			type: '',
			list: [],
			isFans:true,
			typeName : 1,   //1是关注  2是粉丝  3是粉丝
		};
	},
	components:{fansempty},
	created() {},
	onLoad(option) {
		this.type = option.type;
		console.log(this.type);
		if (this.type == 'fans') {
			this.typeName = 2;
			this.getFansList();
			uni.setNavigationBarTitle({
				title: "我的粉丝"//这是修改后的导航栏文字
			})
		} else if(this.type == 'concern') {
			this.typeName = 1;
			this.getFollowList();
			this.isFans = false
		}else if(this.type == 'visitor'){
			this.typeName = 3;
			uni.getStorage({
				key:'token',
				success:(res)=>{
					this.recent();
				}
			})
			this.isFans = false
		}
	},
	methods: {
		getYMDHMS (timestamp) {
		  let time = new Date(timestamp)
		  let year = time.getFullYear()
		  let month = time.getMonth() + 1
		  let date = time.getDate()
		  let hours = time.getHours()
		  let minute = time.getMinutes()
		  let second = time.getSeconds()
	
		  if (month < 10) { month = '0' + month }
		  if (date < 10) { date = '0' + date }
		  if (hours < 10) { hours = '0' + hours }
		  if (minute < 10) { minute = '0' + minute }
		  if (second < 10) { second = '0' + second }
		  return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
		},
		clickZhu(e){
			console.log(e.user_id);
			let url =  '/pageA/personalHome/personalHome?user_id=' + e.user_id;
			uni.navigateTo({
				url: url
			});
		},
		  onreturn() {
		      uni.reLaunch({
		        url: 'user'
		      });
		    },
		follow(value){
			console.log(value)
			follow({id:value.user_id}).then(res=>{
				uni.showToast({
					title:'互关成功',
					icon:'none'
				})
				this.getFansList();
				console.log(res)
			})
		},
		recent(){
			recent().then(res=>{
				this.list = res.data;
			})
			uni.setNavigationBarTitle({
			    title:'最近访客'
			})
		},
		getFansList() {
			getFansList().then(res => {
				this.list = res.data;
			});
			uni.setNavigationBarTitle({
			    title:'我的关注'
			})
		},
		getFollowList() {
			getFollowList().then(res => {
				this.list = res.data;
			});
			uni.setNavigationBarTitle({
			    title:'我关注的'
			})
		}
	}
};
</script>

<style lang="scss">
.fans-box {
	background: #fff;
	height: 100vh;
}
.fans-li {
	display: flex;
	justify-content: flex-start;
	.fans-li-avater {
		display: block;
		width: 128upx;
		height: 128upx;
		margin-right: 30upx;
		border-radius: 50%;
	}
}
.fans-time {
	color: #8389a0;
}
.fans-li-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.fans-name {
		font-size: 36upx;
		font-weight: 500;
		display: flex;
		justify-content: flex-start;
		image {
			display: block;
			width: 42upx;
			height: 42upx;
		}
	}
	.fans-time {
		font-size: 28upx;
		color: rgba(131, 137, 160, 1);
	}
}
.fans-li-tag {
	display: flex;
	justify-content: flex-start;
	margin-top: 20upx;
	text {
		padding: 6upx 10upx;
		margin-right: 10upx;
		border-radius: 2px;
	}
}
.tag1 {
	border: 1px solid rgba(196, 107, 219, 1);
	color: rgba(196, 107, 219, 1);
	background: #f9f0fb;
}
.tag2 {
	border: 1px solid rgba(45, 142, 255, 1);
	color: rgba(45, 142, 255, 1);
	background: #e9f3ff;
}
.tag3 {
	border: 1px solid rgba(255, 89, 152, 1);
	color: #ff5998;
	background: #fff3f8;
}
.tag4 {
	border: 1px solid rgba(255, 170, 55, 1);
	color: rgba(255, 170, 55, 1);
	background: #fff6eb;
}
.fans-li-bot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20upx;
	.fans-li-msg {
		color: rgba(131, 137, 160, 0.8);
		font-size: 32upx;
		display: flex;
		align-items: center;
		image {
			display: block;
			width: 60upx;
			height: 42upx;
		}
	}
}
.fans-li-right {
	flex: 2;
	border-bottom: 1px solid #dfe1ec;
	padding-bottom: 20upx;
}
.fans-attention {
	background: linear-gradient(135deg, rgba(252, 79, 145, 1) 0%, rgba(253, 108, 230, 1) 100%);
	border-radius: 2px;
	width: 152upx;
	line-height: 60upx;
	text-align: center;
	color: #fff;
	font-size: 30upx;
}
</style>
